<script setup>
import {onMounted, ref} from "vue";
import {manageStore} from "../../../stores/counter.js";
import {
  createDict,
  deleteDict,
  dictIndex,
  listDict,
  listDictDetails,
  selectDict,
  updateDict
} from "../../../http/manage/dict.js";
import {createDictItem, deleteDictItem, listDictItem, updateDictItem} from "../../../http/manage/dictItem.js";
import {useRoute} from "vue-router";

const dictIndexData = ref({
  dictList: [],
  dictDetailsMap: {},
  page: {
    page: 1,
    size: 30
  }
})

let currentDict = ref({
  name: ""
})
let dictItemList = ref([])

let dictName = ref("")
let dictDTOForm = ref({})
let showDictDTOForm = ref(false)

let dictUpdate = ref(false)

let dictItemDTOForm = ref({})
let showDictItemDTOForm = ref(false)
let dictItemUpdate = ref(false)

function showDictCreate() {
  showDictDTOForm.value = true
  dictUpdate.value = false
}

function showDictUpdate(dict) {
  selectDict(dict.ukId).then(response => {
    dictDTOForm.value = response.data
  })
  showDictDTOForm.value = true
  dictUpdate.value = true
}

function handleDictCreate() {
  createDict(dictDTOForm.value).then(response => {
    handleDictList()
    dictDTOForm.value = {}
    showDictDTOForm.value = false
  })
}

function handleDictUpdate() {
  updateDict(dictDTOForm.value).then(response => {
    handleDictList()
    dictDTOForm.value = {}
    showDictDTOForm.value = false
  })
}

function handleDictSave() {
  if (dictUpdate.value) {
    handleDictUpdate()
  } else {
    handleDictCreate()
  }
}

function handleDictDelete(dict) {
  deleteDict(dict.ukId).then(response => {
    handleDictList()
  })
}

function handleDictList() {
  listDict(dictName.value).then(response => {
    dictIndexData.value.dictList = response.data
    dictIndexData.value.page = response.page
  })
}

function handleDictTableRowClick(dict) {
  currentDict.value = dict
  handleDictItemList()
}

function showDictItemCreate() {
  dictItemDTOForm.value.dictUkId = currentDict.value.ukId
  showDictItemDTOForm.value = true
  dictItemUpdate.value = false
}

function showDictItemUpdate(dictItem) {
  dictItemDTOForm.value = dictItem
  showDictItemDTOForm.value = true
  dictItemUpdate.value = true
}

function handleDictItemSave() {
  if (dictItemUpdate.value) {
    handleDictItemUpdate()
  } else {
    handleDictItemCreate()
  }
}

function handleDictItemUpdate() {
  updateDictItem(dictItemDTOForm.value).then(response => {
    handleDictItemList()
    dictItemDTOForm.value = {}
    showDictItemDTOForm.value = false
  })
}

function handleDictItemCreate() {
  createDictItem(dictItemDTOForm.value).then(response => {
    handleDictItemList()
    dictItemDTOForm.value = {}
    showDictItemDTOForm.value = false
  })
}


function handleDictItemDelete(dictItem) {
  deleteDictItem(dictItem.ukId).then(response => {
    handleDictItemList()
  })
}

function handleDictItemList() {
  listDictItem(currentDict.value.ukId).then(response => {
    dictItemList.value = response.data
  })
}

function handleDictIndex() {
  dictIndex(dictName.value, dictIndexData.value.page).then(response => {
    dictIndexData.value = response.data
    dictIndexData.value.page = response.page
  })
}

onMounted(() => {
  handleDictIndex()
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; height: 100%; overflow: hidden; padding-left: 5px;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px; padding-left: 5px">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="字典名称">
          <el-input style="width: 200px" v-model="dictName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleDictList">查询</el-button>
          <el-button type="primary" @click="showDictCreate({})">新建字典</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; width: 100%; height: 100%; overflow: auto;">
      <el-table
          highlight-current-row
          @row-click="handleDictTableRowClick"
          :data="dictIndexData.dictList" border style="width: 100%;">
        <el-table-column prop="code" label="编码" min-width="130"/>
        <el-table-column prop="name" label="名称" min-width="100"/>
        <el-table-column prop="status" label="状态" width="70">
          <template #default="scope">
            <el-switch
                @change="dictDTOForm = scope.row; handleDictUpdate()"
                active-value="enable"
                inactive-value="disable"
                v-model="scope.row.status "
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60"/>
        <el-table-column label="操作" width="280">
          <template #default="scope">
            <el-button type="primary" @click.stop="currentDict = scope.row; showDictItemCreate()">新建字典项</el-button>
            <el-button @click.stop="showDictUpdate(scope.row)">
              编辑
            </el-button>
            <el-popconfirm
                width="200"
                @confirm="handleDictDelete(scope.row)"
                :title="'是否删除字典 [' + scope.row.name + '] !'">
              <template #reference>
                <el-button type="danger" @click.stop="">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div
      style="display: flex; flex-flow: column nowrap; flex: auto; height: 100%; overflow: hidden; padding-left: 5px; padding-right: 5px">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
    </div>
    <div class="manage-main">
      <el-table
          ref="dictTableRef"
          :data="dictItemList" border style="width: 100%;">
        <el-table-column prop="code" label="编码" min-width="*"/>
        <el-table-column prop="name" label="名称" min-width="100"/>
        <el-table-column prop="value" label="值"/>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="scope">
            <el-switch
                @change="dictItemDTOForm = scope.row; handleDictItemUpdate()"
                active-value="enable"
                inactive-value="disable"
                v-model="scope.row.status "
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60"/>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button @click="showDictItemUpdate(scope.row)">
              编辑
            </el-button>
            <el-popconfirm
                width="200"
                @confirm="handleDictItemDelete(scope.row)"
                :title="'是否删除字典项 [' + scope.row.name + '] !'">
              <template #reference>
                <el-button type="danger">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog title="字典管理" v-model="showDictDTOForm" :close-on-click-modal="false" label-width="80px">
    <el-form ref="form" :model="dictDTOForm" label-width="80px">
      <el-form-item label="字典编码">
        <el-input v-model="dictDTOForm.code"></el-input>
      </el-form-item>
      <el-form-item label="字典名称">
        <el-input v-model="dictDTOForm.name"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="dictDTOForm.status">
          <el-option
              v-for="item in dictIndexData.dictDetailsMap.data_status.dictItemList"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="dictDTOForm.sort" type="number" min="0" max="10000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleDictSave">Save</el-button>
        <el-button @click="showDictDTOForm = false; dictDTOForm = {}">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog title="字典项管理" v-model="showDictItemDTOForm" :close-on-click-modal="false">
    <el-form ref="form" :model="dictItemDTOForm" label-width="100px">
      <el-form-item label="字典">
        <el-select v-model="dictItemDTOForm.dictUkId">
          <el-option
              v-for="item in dictIndexData.dictList"
              :key="item.ukId"
              :label="item.name"
              :value="item.ukId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字典项编码">
        <el-input v-model="dictItemDTOForm.code"></el-input>
      </el-form-item>
      <el-form-item label="字典项名称">
        <el-input v-model="dictItemDTOForm.name"></el-input>
      </el-form-item>
      <el-form-item label="字典项值">
        <el-input v-model="dictItemDTOForm.value"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="dictItemDTOForm.status">
          <el-option
              v-for="item in dictIndexData.dictDetailsMap.data_status.dictItemList"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="dictItemDTOForm.sort" type="number" min="0" max="90000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleDictItemSave">Save</el-button>
        <el-button @click="showDictItemDTOForm = false; dictItemDTOForm = {}">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>
</style>